<template>
  <div class="contentShadow">
    <el-container>
      <el-header>
        <h1>专业表</h1>
      </el-header>
      <el-main>
        <el-radio-group v-model="size">
          <el-radio label="">默认</el-radio>
          <el-radio label="medium">中等</el-radio>
          <el-radio label="small">小型</el-radio>
          <el-radio label="mini">超小</el-radio>
        </el-radio-group>
        <!-- 表格 -->
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :size="size">
          <el-table-column prop="number" label="序号" type="index" :index="indexMethod" align="center">
          </el-table-column>
          <el-table-column prop="majorId" label="专业ID" align="center">
          </el-table-column>
          <el-table-column prop="majorCode" label="专业代码" align="center">
          </el-table-column>
          <el-table-column prop="majorName" label="专业名称" align="center">
          </el-table-column>
          <el-table-column prop="modify" label="操作" align="center">
            <template v-slot="scope">
              <el-button type="warning" @click="modify(scope.$index)" :size="size">修改</el-button>
              <el-button type="danger" @click="dialogVisible3 = true; removalIndex = scope.$index" :size="size">删除
              </el-button>
              <el-dialog :visible.sync="dialogVisible3" title="删除确认">
                <span>你确定要删除吗？</span>
                <span slot="footer" class="dialog-footer">
                  <el-button type="success" @click="dialogVisible3 = false">取消</el-button>
                  <el-button type="danger" @click="submitRemove(removalIndex)">确定</el-button>
                </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;display: flex; justify-content: center;">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[1, 5, 10, 20, 50]"
                         :page-size="pageSize"
                         background
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
        <!-- 新增框-->
        <div>
          <div style="margin-top: 15px">
            <el-button type="success" @click="dialogVisible1 = true">新建</el-button>
            <el-dialog
                title="导出"
                :visible.sync="dialogVisible1"
                width="30%"
                :close-on-click-modal="false"
            >
              <div>
                <el-form ref="form1" :model="formData1" size="small">
                  <el-form-item label="专业代码"
                                prop="majorCode"
                                :rules="{
                                  required: true,
                                  message: '请填写专业代码',
                                  trigger: 'blur'
                                }">
                    <el-input v-model="formData1.majorCode"></el-input>
                  </el-form-item>
                  <el-form-item label="专业名称"
                                prop="majorName"
                                :rules="{
                                  required: true,
                                  message: '请填写专业名称',
                                  trigger: 'blur'
                                }">
                    <el-input v-model="formData1.majorName"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
             <el-button @click="resetForm1('form1')">重置</el-button>
             <el-button type="success" @click="add">提交</el-button>
            </span>
            </el-dialog>
          </div>
        </div>
        <!-- 修改框-->
        <div>
          <el-dialog
              title="修改专业信息"
              :visible.sync="dialogVisible2"
              width="30%"
          >
            <div>
              <el-form ref="form2" :model="formData2" size="small">
                <el-form-item label="专业ID" prop="majorId">
                  <el-input v-model="formData2.majorId" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="专业代码" prop="majorCode">
                  <el-input v-model="formData2.majorCode"></el-input>
                </el-form-item>
                <el-form-item label="专业名称" prop="majorName">
                  <el-input v-model="formData2.majorName"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="resetForm2('form2')">重置</el-button>
              <el-button type="success" @click="submitModify" :loading="loading">提交</el-button>
            </div>
          </el-dialog>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import {acquireMajorInformation} from "@/api/basic";
import {addMajorInformation, modifyMajorInformation, removeMajorInformation} from "@/api/admin";

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 5, // 每页的数据条数
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      removalIndex: null,
      temp: 0, // 等待修改的导师信息在表格中的序号
      formData1: {majorId: null, majorCode: '', majorName: ''},
      formData2: {majorId: '', majorCode: '', majorName: ''},
      loading: false,
      size: ''
    };
  },
  mounted() {
    acquireMajorInformation().then(res => {
      this.tableData = res.data
      this.total = res.data.length
    })
  },
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //生成自增的序号
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
    // 新建
    add() {
      addMajorInformation(this.formData1).then((res) => {
        this.$message.success(res["data"])
        this.resetForm1("form1")
        acquireMajorInformation().then(res => {
          this.tableData = res.data
          this.total = res.data.length
        })
        this.dialogVisible1 = false;
      })
    },
    //点击详情跳转
    modify(index) {
      this.temp = index + (this.currentPage - 1) * this.pageSize;
      // this.temp = index + 1 + (this.currentPage - 1) * this.pageSize;
      // this.temp = index;
      // console.log(this.temp);
      this.formData2 = JSON.parse(JSON.stringify(this.tableData[this.temp]))
      this.dialogVisible2 = true;
    },
    //删除
    remove(index) {
      const temp = index + (this.currentPage - 1) * this.pageSize;
      this.dialogVisible2 = true;
    },
    //重置
    resetForm1(formName) {
      this.$refs[formName].resetFields();
    },
    resetForm2(formName) {
      this.formData2 = JSON.parse(JSON.stringify(this.tableData[this.temp]))
    },
    //导出，注意一下任意文件下载漏洞和越权漏洞
    submitModify() {
      this.loading = true;
      modifyMajorInformation(this.formData2).then(() => {
        acquireMajorInformation().then(res => {
          // console.log(res)
          this.loading = false
          this.tableData = res.data
          this.total = res.data.length
          this.$message.success('修改成功')
        })
      })
    },
    submitRemove(index) {
      const temp = index + (this.currentPage - 1) * this.pageSize;
      const majorId = this.tableData[temp].majorId;
      // this.$message.success(majorId)
      removeMajorInformation(majorId).then(() => {
        acquireMajorInformation().then((res2) => {
          this.tableData = res2.data
          this.total = res2.data.length
          this.currentPage = 1;
          this.dialogVisible3 = false
          this.$message.success('删除成功')
        })
      });
    },
  }
};
</script>

<style>
@import '../../style/contentShadow.css';
</style>
